<template>
    <view class="page">
        <view class="head-wrap">
            <view class="text">头像</view>
            <view class="head" @click="handleHead"><image :src="showHead"></image></view>
        </view>
        <view class="list">
            <view class="text">昵称</view>
            <view class="input-wrap">
                <input type="text" class="input" placeholder="请输入昵称" v-model="nickname" />
            </view>
        </view>
        <view class="list">
            <view class="text">姓名</view>
            <view class="input-wrap">
                <input type="text" class="input" placeholder="请输入姓名" v-model="name" />
            </view>
        </view>
        <view class="list" @click="selectGender">
            <view class="text">性别</view>
            <view class="input-wrap">
                <view class="text-tip">{{gender=='1'?'男':gender=='2'?'女':'请选择'}}</view>
                <view class="arrow"></view>
            </view>
        </view>
        <button type="button" class="submit-btn" @click="submit()">保存</button>
    </view>
</template>

<script>
    import {mapActions,mapState} from "vuex";
    export default {
        name: "profile",
        data(){
            return {
                showHead:"../../static/images/user/head.png",//显示头像
                gender:"",//性别
                nickname:"",//昵称
                name:"",//姓名
                head:""//保存到数据库的头像图片名称
            }
        },
        onLoad(opts){
            this.branch_shop_id=opts.branch_shop_id?opts.branch_shop_id:"";
            this.table_code=opts.table_code?opts.table_code:"";
            this.isSubmit=true;
            this.$utils.safeUser(this,this.branch_shop_id,this.table_code,()=>{
                this.getUserInfo({branch_shop_id:this.branch_shop_id,success:(data)=>{
                    this.name=data.name;
                    this.nickname=data.nickname;
                    this.gender=data.gender;
                    this.showHead=data.head;
                }})
            });
        },
        methods:{
            ...mapActions({
                getUserInfo:"user/getUserInfo",//获取会员信息
                updateUser:"user/updateUser",//修改会员信息
                uploadHead:"user/uploadHead"// 会员头像上传
            }),
            //操作头像
            handleHead(){
                uni.showActionSheet({
                    itemList: ['拍照', '从相册选择'],
                    success: (res)=> {
                        let sourceType=[];
                        if(res.tapIndex==0){
                            sourceType=['camera'];//拍照
                        }else if(res.tapIndex==1){
                            sourceType=['album'];//从相册选择
                        }
                        //选择图片
                        uni.chooseImage({
                            count: 1,                            
                            sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                            sourceType: sourceType, //从相册选择
                            success: async (res)=> {
                                let tempFilePath=res.tempFilePaths[0];
                                this.showHead=tempFilePath;
                                //上传头像
                                try {
                                    const uploadRes = await this.uploadHead({
                                        head: tempFilePath
                                    });
                                    if (uploadRes.status === 1 && uploadRes.code === 200) {
                                        this.head = uploadRes.data.msbox;
                                        uni.showToast({
                                            title: '头像上传成功',
                                            icon: 'none',
                                            duration: 2000
                                        });
                                    } else {
                                        uni.showToast({
                                            title: '头像上传失败',
                                            icon: 'none',
                                            duration: 2000
                                        });
                                    }
                                } catch (error) {
                                    uni.showToast({
                                        title: '头像上传失败',
                                        icon: 'none',
                                        duration: 2000
                                    });
                                }
                            }
                        });
                    },
                    fail: (res)=> {
                        // console.log(res.errMsg);
                    }
                });
            },
            //选择性别
            selectGender(){
                uni.showActionSheet({
                    itemList: ['男', '女'],
                    success:  (res)=> {
                        this.gender=res.tapIndex + 1;
                    },
                    fail: function (res) {
                        // console.log(res.errMsg);
                    }
                });
            },
            //保存用户信息
            async submit(){
                if(this.isSubmit){
                    if(this.nickname.trim()==''){
                        uni.showToast({
                            title: '请输入昵称',
                            icon: 'none',
                            duration:2000
                        })
                        return;
                    }
                    if(this.name.trim()==''){
                        uni.showToast({
                            title: '请输入姓名',
                            icon: 'none',
                            duration:2000
                        })
                        return;
                    }
                    if(String(this.gender).trim()==''){
                        uni.showToast({
                            title: '请选择性别',
                            icon: 'none',
                            duration:2000
                        })
                        return;
                    }
                    this.isSubmit=false;
                    try {
                        await this.updateUser({
                            branch_shop_id: this.branch_shop_id,
                            name: this.name,
                            nickname: this.nickname,
                            gender: this.gender,
                            head: this.head
                        });
                        uni.showToast({
                            title: "保存成功！",
                            icon: "none",
                            duration: 2000
                        });
                        setTimeout(() => {
                            uni.navigateBack({ delta: 1 });
                        }, 2000);
                    } catch (error) {
                        uni.showToast({
                            title: "保存失败",
                            icon: "none",
                            duration: 2000
                        });
                        this.isSubmit = true;
                    }
                }
            }
        },
        computed:{
            ...mapState({
                uid: state => state.user.uid,
                token: state => state.user.token,
                platform: state => state.system.platform
            })
        }
    }
</script>

<style scoped>
    .page{width:100%;height:100vh;overflow:hidden;background-color:#FFFFFF;}
    .head-wrap{width:100%;height:120rpx;border-bottom: 1px solid #EFEFEF;display:flex;justify-content: space-between;align-items: center;box-sizing: border-box;padding:0px 30rpx;}
    .head-wrap .text,.list .text{font-size:28rpx;color:#333333;}
    .head-wrap .head{width:100rpx;height:100rpx;}
    .head-wrap .head image{width:100%;height:100%;border-radius: 100%;}
    .list{width:100%;height:80rpx;border-bottom: 1px solid #EFEFEF;display:flex;justify-content: space-between;align-items: center;box-sizing: border-box;padding:0px 30rpx;}
    .list .input-wrap{width:auto;height:100%;display:flex;align-items: center;}
    .list .input-wrap .input{width:380rpx;height:66rpx;font-size:28rpx;text-align:right;}
    .list .arrow{width:40rpx;height:40rpx;background-image: url("~@/static/images/user/right_arrow.png");background-size:100%;background-repeat: no-repeat;background-position: center;margin-left:20rpx;}
    .list .text-tip{font-size:28rpx;color:#333333;}
    .submit-btn{width:200rpx;height:60rpx;margin:0 auto;background-color:#E30019;color:#FFFFFF;font-size:28rpx;margin-top:40rpx;line-height:60rpx;border-radius: 4px;}
</style>